<template>
  <div class="container">
    <div class="export-header">
      <el-button icon="el-icon-edit" type="primary" size='medium' @click="()=>{this.$router.push('/wordEdit')}">新增</el-button>
      <el-button icon="el-icon-upload2" type="primary" size='medium' @click="addItem">导入</el-button>
      <el-button icon="el-icon-download" type="primary" size='medium' @click="exportClick">导出</el-button>
    </div>
    <div class="input_modal">
      <div class="input-item">
        <span>单词：</span>
        <el-input v-model="english" placeholder="请输入内容" class="proName" @keyup.enter.native="search"></el-input>
      </div>
      <div class="input-item">
        <span>知识分类：</span>
        <el-select v-model='knowledgeType' placeholder='-请选择-' @change="getList" style="height: 30px;  line-height: 30px;width:200px;">
          <el-option label="全部" value="" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option v-for="(item,index) in loadArr" :key="index" :label="item.value" :value="item.key" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
        </el-select>
        <el-button icon="el-icon-search" type="primary" size="medium" @click="getList">查询</el-button>
      </div>
    </div>
    <div class="table_con">
      <el-table v-loading="loading" :data="tableData" :border='true'>
        <el-table-column :formatter="formatter" prop="letter" label="字母分类"></el-table-column>
        <el-table-column :formatter="formatter" prop="seqId" label="序号"></el-table-column>
        <el-table-column :formatter="formatter" prop="wordStock" label="词库名称"></el-table-column>
        <el-table-column :formatter="formatter" prop="knowledgeTypeDesc" label="知识分类"></el-table-column>
        <el-table-column :formatter="formatter" prop="english" label="单词"></el-table-column>
        <el-table-column :formatter="formatter" prop="chinese" label="中文"></el-table-column>
        <el-table-column prop="" label="操作" width='120'>
          <template slot-scope="scope">
            <el-button class="link" type="primary" size="mini">
              <router-link :to="{ path: 'wordDetail',query: {id: scope.row.id, pageIndex:pageIndex}}" style="color: #fff;">查看</router-link>
            </el-button>
            <el-button class="link" type="primary" size="mini">
              <router-link :to="{ path: 'wordEdit',query: {id: scope.row.id, pageIndex:pageIndex}}" style="color: #fff;">编辑</router-link>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="单词导入" :visible.sync="dialogVisible" width="40%" >
       <el-upload
        class="upload-demo"
        style="margin:0 auto;width:400px;"
        drag
        :file-list="fileList"
        :action="importUrl"
        :on-success="handUploadSuccess"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">点击下载  <a href="http://lc-32bvamkf.cn-n1.lcfile.com/525cbe62a6fbcd1192df.xlsx">单词导入模板</a></div>
      </el-upload>
      <!-- <span slot="footer" style="margin:0 auto;display:inline-block" class="dialog-footer">
        <el-button  @click="handSave" type="primary">确 定</el-button>
      </span> -->
    </el-dialog>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :page-size="pageSize" :page-sizes='[10,20,30,40]' layout="total, sizes, prev, pager, next, jumper" :total="pageCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      tableData: [],
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      knowledgeType: null,
      english: null,
      loadArr: [],
      dialogVisible:false,
      importUrl:'',
      fileList:[]
    };
  },
  mounted() {
    this.pageIndex = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getList();
    this.getDictList();
    let sessionId = sessionStorage.getItem('sessionId');
    this.importUrl = `${CONSTANT.URL.LIST.EXPORTWORD}?sessionId=${sessionId}`;
     
  },
  methods: {
    handSave(){
      this.dialogVisible = false
    },
    addItem(){
      this.fileList = []
      this.dialogVisible = true
    },
    handUploadSuccess(res){
      if(res.data&&res.data.bussData){
       setTimeout(()=>{
          this.$message({
            type:'success',
            message:'导入成功!'
        });
         this.pageIndex = 1
         this.getList();
         this.dialogVisible = false
       },1000)
      }else{
        this.$message({
            type:'warning',
            message:res.msg
        })
         this.dialogVisible = false
      }
    },  
    exportClick(){
      let sessionId = sessionStorage.getItem('sessionId');
      let url = `${CONSTANT.URL.LIST.EXPORTWORD1}?sessionId=${sessionId}`;
      let data = {
        english: this.english,
        knowledgeType: this.knowledgeType
      };
      for (let item in data) {
        if (!data[item] && data[item] !== false) {
          delete data[item]
        }
      }
      for (let item in data) {
        url = url + "&" + item + '=' + data[item];
      }
      location.href=url
    },
    getDictList() {
      let url = CONSTANT.URL.SYSTEM.LOADLIST;
      common.requestAjax(url, null, { codeType: "knowledge" }, res => {
        this.loadArr = res.data.bussData;
      });
    },
    formatter(row, column, cellValue) {
      return cellValue ? cellValue : "- -";
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.WORDLIST;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        english: this.english,
        knowledgeType: this.knowledgeType
      };
      this.loading = true;
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading = false;
        let data = res.data;
        this.tableData = data.bussData;
        this.pageCount = data.count;
      });
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList();
    }
  }
};
</script>
